<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Activitys</title>
		<script src="/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="css/index.css">
		<script src="/js/jquery.min.js"></script>
		<script src="/js/jquery.i18n.properties.min.js"></script>
		<script src="/js/util.js"></script>
		<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
		}
			#mainbox{
				width: 100%;
				height: 100%;
				display: flex;
				padding-top: 10px;
				background-color: #efefef;
			}
			.fenlei1-box{
				width: 20%;
				height: 100%;

				overflow: auto;
			}
		.select-box{
			padding: 0.625rem;
			display: none;
			background-color: #007AFF;
			z-index: 100;
			position: absolute;
			right: 0rem;
			top: 0rem;
		}
		.select-box .language{
			margin-bottom: 0.3125rem;
		}
			.fenlei1-box::-webkit-scrollbar { width: 0 !important }/*隐藏手机端滚动条*/
			.fenlei2-box::-webkit-scrollbar { width: 0 !important }
			
			.fenlei1-box div{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				padding-left: 0.625rem;
				padding-right: 0.625rem;
				margin-bottom: 1.5rem;
				cursor: pointer;
				font-size: 16px;
			}
			.fenlei1-box .active{
				color: #F51012;
				font-weight: bold;
			}
			.fenlei2-box{
				width: 80%;
				height: 100%;
				background-color: #efefef;
				overflow: auto;
			}
			.fenlei2-itembox{
				background-color: white;
				border-radius: 0.875rem;
				/* height: 18.75rem; */
				margin-bottom: 1.25rem;
				margin-right: 0.625rem;
				padding: 1.25rem;
			}
			.fenlei2-box img{
				max-width: 15rem;
				height: 15rem;
			}
			.fenlei2-itembox .title{
				font-size: 16px;
				font-weight: bold;
			}
			.fenlei2-itembox .listbox{
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
			}
			.fenlei2-itembox .listbox img{
				margin-bottom: 0.625rem;
			}
			.fenlei2-itembox .listbox .item{
				text-align: center;
				margin: 2rem;
				cursor: pointer;
			}
			.fenlei2-itembox .listbox .gname{
				font-size: 1.5rem;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid topbg">
			<div style="display: flex;justify-content: flex-start;float: left;margin-left: 8px">
				<img src="img/fanhui.png" style="width: 20px;height: 20px" onclick="fanhui()">
			</div>
			<div class="flex pull-right">
<!--				<div class="" data-lang="index_help">-->
<!--					Help-->
<!--				</div>-->
<!--				<div><img src="img/icon1.png" class="icon" /></div>-->
<!--				<div class="shuxian"></div>-->
				<div class="language">
					<img src="img/yingguo.png" class="guoqi" >
					<span>ENG</span>
				</div>
				<div>
					<a href="login.html" class="loginBtn" data-lang="login">登录</a>
				</div>
				<div class="select-box">
					<div class="language">
						<img src="img/zhongguo.png" class="guoqi" >
						<span>中文</span>
					</div>
					<div class="language">
						<img src="img/yingguo.png" class="guoqi" >
						<span>EN</span>
					</div>
					<div class="language">
						<img src="img/taiguo.png" class="guoqi" >
						<span>ภาษาไทย</span>
					</div>
					<div class="language">
						<img src="img/jianpuzhai.webp" class="guoqi" >
						<span>កម្ពុជា។</span>
					</div>
				</div>
			</div>
		</div>
		<div id="mainbox" class="container">
			<div class="fenlei1-box">
				<div v-for="(x,i) in cat" :key="x.id" :class="showid==i? 'active' :''" @click="show(i)">{{x.gname}}</div>
			</div>
			<div class="fenlei2-box">
				<div class="fenlei2-itembox" v-for="(a,j) in cat2" :key="a.id">
					<div class="title">{{a.gname}}</div>
					<div class="listbox">
						<div class="item" v-for="(item,k) in a.children" :key="item.id" @click="gopage(item.id)">
							<img :src="serverHost+'/'+item.icon" alt="" class="img">
							<p class="gname">{{item.gname}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function fanhui(){
			window.history.go(-1); //返回上一页
		}

	new Vue({
	  el: '#mainbox',
	  data () {
	    return {
	      cat: [],
	      cat2: [],
			showid:0,
			serverHost:""
	    }
	  },
	  mounted () {
		  this.serverHost = this.getHost();
	    axios
	      .get(`${this.serverHost}/admin/GoodsType/getGoodsFenlei?yuyan=${localStorage.getItem("yuyan")}`)
	      .then((res) => {
					this.cat = res.data.data;
					this.cat2 = this.cat[this.showid].children;
					})
	      .catch(function (error) { // 请求失败处理
	        console.log(error);
	      });

	  },
		methods:{
			show(n){
				this.showid=n;
				this.cat2=this.cat[n].children;
			},
			gopage(typeid){
				//window.location='./goodsdetail.html?id=1446750495412617218';
				///goods/getGoodsPageByType
				window.location  = './goodslist.html?typeid='+typeid;
			},
			getHost(){
				var curWwwPath = window.document.location.href;
				var pathName = window.document.location.pathname;
				var pos = curWwwPath.indexOf(pathName);
				var localhostPaht = curWwwPath.substring(0, pos);
				var projectName = pathName
						.substring(0, pathName.substr(1).indexOf('/') + 1);
				if (projectName == "/pc" || projectName == "/admin" || projectName == "/weixin"  || projectName == "/wap")
					projectName = "";
				return (localhostPaht);
			}
		}
	})
		$(function () {
			let width = $(window).width();
			if(width>1000) {
				$(".container").width('600px');
				$(".topbg").width('600px');
			}
			var n = 0;
			if(localStorage.getItem("yuyan")=='zh')
			{
				n=0;// 中文
				$(".topbg>.flex>.language>img").attr('src','img/zhongguo.png');
				$(".topbg>.flex>.language>span").html('中文');
			}
			else if(localStorage.getItem("yuyan")=='en')
			{
				n=1;// 英文
				$(".topbg>.flex>.language>img").attr('src','img/yingguo.png');
				$(".topbg>.flex>.language>span").html('EN');
			}
			else if(localStorage.getItem("yuyan")=='th')
			{
				n=2;// 泰语
				$(".topbg>.flex>.language>img").attr('src','img/taiguo.png');
				$(".topbg>.flex>.language>span").html('ภาษาไทย');
			}
			else if(localStorage.getItem("yuyan")=='kh')
			{
				n=3;// 泰语
				$(".topbg>.flex>.language>img").attr('src','img/jianpuzhai.webp');
				$(".topbg>.flex>.language>span").html('កម្ពុជា។');
			}
			language_pack.loadProperties(n);
			// 切换语言
			$(".topbg>.flex>.language").click(function(){
				$(".select-box").show();
				$(".select-box>.language").click(function(){
					let n = $(this).index();
					if(n==0)
						localStorage.setItem("yuyan",'zh');// 中文
					else if(n==1)
						localStorage.setItem("yuyan",'en');// 英文
					else if(n==2)
						localStorage.setItem("yuyan",'th');// 泰语
					else if(n==3)
						localStorage.setItem("yuyan",'kh');
					$(".topbg>.flex>.language>img").attr('src',$(this).find('img').attr('src'));
					$(".topbg>.flex>.language>span").html($(this).find('span').html());
					language_pack.loadProperties(n);
					window.history.go(0);
					$('.select-box').hide();
				})
			})
		})
	$(function () {
		document.title="Category"
	})
	</script>
</html>
